<style>
#UserInfoPage{
	padding: 16px;
	border-radius: 2px;
	background: #AAA;
	display: inline-block;
}
#UserInfoTable td{
	padding: 10px 0px;
}
#UserIconDiv input{
	padding: 6px;
	margin: 10px 0px;
}
#UserInfoTable input{
	padding: 6px;
}
#UserInfoSaveButton{
	width: 90%;
	float: left;
	box-sizing: border-box;
}
#UserInfoExitButton{
	width: 90%;
	float: right;
	color: #C00;
	box-sizing: border-box;
}
</style>

<div id='UserInfoPage'>
	<div id='UserIconDiv' title='点击上传用户图像'></div>
	<table id='UserInfoTable'>
		<tr><td colspan='2'><v-text id='UserInfoUserText' title='用户名称' maxlength='32' size='28'></v-text></td></tr>
		<tr><td colspan='2'><v-text id='UserInfoMailText' title='关联邮箱' maxlength='128' size='28'></v-text></td></tr>
		<tr><td colspan='2'><v-text id='UserInfoNameText' title='用户昵称' maxlength='32' size='28'></v-text></td></tr>
		<tr><td colspan='2'><v-text id='UserInfoPhoneText' title='电话号码' maxlength='20' size='28'></v-text></td></tr>
		<tr><td colspan='2'><v-text id='UserInfoAddressText' title='通讯地址' maxlength='128' size='28'></v-text></td></tr>
		<tr><td><v-button id='UserInfoSaveButton' title='保存修改'></v-button></td><td><v-button id='UserInfoExitButton' title='安全退出'></v-button></td></tr>
	</table>
</div>

<script>
var curusericon = null;
var uploaduserimage = null;

getVue('UserInfoPage');

function setReadonly(id){
	$('#' + id).attr('disabled', 'disabled').css('color', '#AAA');
}

function updateUserIcon(){
	curusericon = '/getusericon?user=' + getCurrentUser();
	uploaduserimage.image.css('background-image', 'url(' + curusericon + "&seqno=" + getSequence() + ')');
}

$('#UserInfoTable input').focus(function(){
	setToastTitle("<font color='#444' style='font-size:1.5rem;font-weight:bold'>用户信息</font>");
});

uploaduserimage = new UploadImageWidget('UserIconDiv', '用户图像', '14px', 256 * 1024);

uploaduserimage.callback(function(data){
	if (data == null || data.code < 0){
		showErrorToast('图片上传失败');
	}
	else{
		curusericon = data.url[0];
	}
});

uploaduserimage.image.parent().click(function(){
	var iconpick = new IconPicker(uploaduserimage.image, 'user');

	uploaduserimage.image.blur(function(){
		curusericon = getBackgroundImage(uploaduserimage.image[0]);
		iconpick.hide();
	});
});

$('#UserInfoExitButton').click(function(){
	getHttpResult('/CheckLogin', {flag: 'Q'});

	clearCookie();

	window.location.href = '/';
});

$('#UserInfoSaveButton').click(function(){
	var icon = curusericon;
	var user = $('#UserInfoUserText').val();
	var name = $('#UserInfoNameText').val();
	var phone = $('#UserInfoPhoneText').val();
	var addr = $('#UserInfoAddressText').val();

	var param = {};

	param["flag"] = 'U';
	param["user"] = user;
	param["name"] = name;
	param["icon"] = icon;
	param["addr"] = addr;
	param["phone"] = phone;
	

	getHttpResult('/EditUser', param, function(data){
		if (data.code == XG_TIMEOUT){
			sessionTimeout();
		}
		else if (data.code < 0){
			setToastErrorText('更新用户信息失败');
		}
		else if (data.code > 0){
			showToast('更新用户信息成功');

			if (updateTitle){
				updateTitle();
			}
		}
		else{
			hideToastBox();
		}
	});
});

updateUserIcon();
setReadonly('UserInfoUserText');
setReadonly('UserInfoMailText');
setToastTitle("<font color='#444' style='font-size:1.5rem;font-weight:bold'>用户信息</font>");
</script>